<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左右固定中间自适应</title>
	</head>
	<style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}
		/* 方式二:定位 */
		.box{
			background: #000000;
			position: relative;
		}
		.left{
			width: 100px;
			height: 100%;
			background: #21759B;
			position: absolute;
			top: 0;
			left: 0;
		}
		.main{
			margin: 0 100px;
			height: 200px;
			background: #ccc;
		}
		.right{
			width: 100px;
			height: 100%;
			background: #21759B;
			position: absolute;
			top: 0;
			right: 0;
		}
	</style>
	<body>
		<div class="box">
			<div class="left">左边固定</div>
			<div class="main">中间自适应</div>
			<div class="right">右边固定</div>
		</div>
	</body>
</html>
